<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="/js/jquery-1.4.2.min.js"></script>
<style>
body {
    overflow:hidden;
    background: #FFFACD;
    font-family: Tahoma;
    font-weight: bold;
    padding: 0 0 0 5px;
}
p {
    margin: 0 0 0 0.5em;
}
a {
    color: #F60;
}
.icon {
    float: left;
    padding: 0 3px 0 0;
}
.box {
    clear: both;
}
.box .text {
    overflow: auto;
}
</style>
<script type="text/javascript">
chrome.extension.sendRequest({id:location.hash.slice(1)}, function(item){
	if (item.event_id) {
		// 例) [title]nameさんが新規イベントを作成しました。
		// 例) [title]参加できるようになりました
		// 例) [title]満席になりました。定員:n キャンセル待ち:n
		// 例) [title]イベント内容に変更がありました
		// 例) [title](備忘通知)開催日時 yyyy/mm/dd(day) hh:mi
		$('#link').attr('href', 'http://atnd.org/events/' + item.event_id);
		$('#title').text("[" + item.title + "]");
		$('#message').text(item.msg);
		tweet('['+ item.title + ']' + item.msg + ' http://atnd.org/events/' + item.event_id);
	} else if (item.ownerId) {
		// Userページへのリンク
		// 例) [イベント通知設定]nameさんを通知設定しました
		// 例) [イベント通知設定]nameさんを通知設定を解除しました
		$('#link').attr('href', 'http://atnd.org/users/' + item.ownerId).click(function () {
			window.close();
		});
		$('#title').text("[" + item.title + "]");
		$('#message').text(item.msg);
		if (item.msg.indexOf("解除") == -1) {
			tweet('['+ item.title + ']' + item.name + 'さん( http://atnd.org/users/' + item.ownerId + ' )を通知設定しました');
		}
	} else if (item.version) {
		// 更新通知
		$('#title').text('[ATND Notify Update]');
		$('#message').text(item.version + 'に更新されました。');
		$('#link').attr('href', "/html/options/news.html").click(function () {
			window.close();
		});
	} else {
		// 例) [イベントカレンダーを更新]クリックしてカレンダーを確認してください。
		// 例) [keyword]3件のイベントが見つかりました。クリックしてカレンダーを確認してください。
		$("#link").attr("href", "/html/options/calendar.html").attr('target', 'calendar');
		$('#title').text('[' + item.title + ']');
		$('#message').text(item.msg);
	}

    anchorEventBackgroundWindowOpen();
});

function tweet(message) {
	var tweet = encodeURIComponent(message + ' #atndnotify http://goo.gl/xeCe');
	$('#tweetLink').attr('href', 'http://twitter.com/home/?status=' + tweet);
	$('#tweet').show();
}

function anchorEventBackgroundWindowOpen() {
    // ブラウザを起動していない時に通知があった場合でもリンクからページを開けるようにbackgroundからwindowを開く
    $('a').each(function (i, e) {
        var $a = $(e);
        $a.attr('uri', $a.attr('href'));
        $a.attr('href', "#"); // backgroundで開くためhrefは無効化
        $a.attr('window_name', $a.attr('target') || '_blank');
        $a.attr('target', '');
        $a.click(function () {
            chrome.extension.sendRequest({id:'window.open',
                                          url:$(this).attr('uri'),
                                          target:$(this).attr('window_name')});
        });
    });
}
</script>
</head>
<body>
<div class="box">
    <div class="icon">
        <a href="/html/options/calendar.html" target="atndnotify_icon"><img src="/images/icon_48.png"></a>
    </div>
    <div class="text">
        <p>
            <a id="link" href="#" target="link">
                <span id="title" ></span><br />
                <span id="message" ></span>
            </a>
            <br />
            <div id="tweet" style="display:none;padding:5px;">
                <a id="tweetLink" target="tweet" ><img src="/images/tweet.png" /></a>
            </div>
        </p>
    </div>
</div>
</body>
</html>